<!--
 -- 签到签退 查看人员分布
-->
<template>
    <div class="viewStaffDistribution">
        <el-row :gutter="20">
            <el-col :span="16">
                <div v-show="viewStaffDistributionData.length !==0?true:false" id="myMap" class="myMapClass" ref="myMap"></div>
                <div v-show="viewStaffDistributionData.length ===0?true:false" class="no_allmap">暂无人员分布信息</div>
            </el-col>
            <el-col :span="8">
                <div style="width:100%">
                    <el-form label-position="left">
                        <el-form-item label="查询时间点：" style="margin: 0px 0px 20px 0px;">
                            <el-radio-group v-model="QueryTimePoint" style="display: flex;justify-content: flex-end;">
                                <el-radio-button label="left">当前</el-radio-button>
                                <el-radio-button label="right">历史</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 50px;" v-if="QueryTimePoint === 'right'?true:false">
                            <!-- <el-date-picker
                                v-model="formInline_temp.time"
                                
                                align="right"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm"
                                :picker-options="util.intTimePickerOptions()"
                                >
                            </el-date-picker> -->
                            <el-date-picker
                                v-model="formInline_temp.time"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="查询人员：" style="margin: 0px 0px 20px 0px;">
                            <el-radio-group v-model="QueryStaff" style="display: flex;justify-content: flex-end;">
                                <el-radio-button label="left">全员</el-radio-button>
                                <el-radio-button label="right">人员</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="QueryStaff === 'right'?true:false">
                            <el-select filterable v-model="formInline_temp.signUser" multiple clearable  placeholder="全部签到人">
                                <el-option
                                    v-for="item in personnelOptions"
                                    :key="item.accountName"
                                    :label="item.name"
                                    :value="item.accountName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="btn_cliss">
                            <el-button class="form-search-btn" style="width:367px" type="primary" @click="getData()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getSignLastPoint } from '@/api/signIn'
import {getHaveOrgUserList} from '@/api/user'
import BMap from 'BMap'
import util from '@/utils/util'
export default {
    props:{
        // viewStaffDistributionData:{
        //     type:Array,
        //     required:true,
        // },
        formInline:{}
    },
    data(){
        return{
            QueryTimePoint: 'left',
            QueryStaff: 'left',
            util:util,
            formInline_temp: {
                orgIds:'',
                time:'',
                signUser:'',
                currentPageSize: 999999999,
                currentPageIndex: 1,
                currentPageTotal: 0,
                type: ''
            },
            startTime:"",
            endTime:"",
            personnelOptions: [], // 值班人员下拉框数据
            viewStaffDistributionData: [] // 人员分布
        }
    },
    created(){
        if (this.formInline.signUser !== '') {
            // this.formInline_temp.time =  ['', util.NowTime_create()]
            this.formInline_temp.orgIds =  this.formInline.orgIds
            this.formInline_temp.type =  this.formInline.type
            this.formInline_temp.signUser =  this.formInline.signUser

        } else {
            this.formInline_temp.orgIds =  this.formInline.orgIds
            this.formInline_temp.type =  this.formInline.type
            this.formInline_temp.currentPageTotal =  this.formInline.currentPageTotal
            // this.formInline_temp.time =  ['', util.NowTime_create()]
        }
        this.getUsers()
    },
    mounted(){
    },
    methods:{
        initMap(viewStaffDistributionData){
            this.createMap() ; //创建地图
            this.addMarker(viewStaffDistributionData);//向地图中添加marker
        },
        getUsers(){
            getHaveOrgUserList({
                orgIds:this.formInline_temp.orgIds,
            }).then(res => {
                this.personnelOptions = res.data
                this.getData()
            })
        },
        createMap(){
            let _this = this
            let map = new BMap.Map(_this.$refs.myMap);//在百度地图容器中创建一个地图
            let point = new BMap.Point(this.viewStaffDistributionData.length!==0?this.viewStaffDistributionData[0].longitude: 0,this.viewStaffDistributionData.length!==0?this.viewStaffDistributionData[0].latitude:0);//定义一个中心点坐标
            map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map;//将map变量存储在全局
            map.enableScrollWheelZoom(true)
        },
        toTree: function(tarArray){
            let self = this
            let newArr = self.deRepeat(tarArray)
            for(let i=0;i<newArr.length;i++){
                newArr[i].children = []
                for(let n=0;n<tarArray.length;n++){
                    if(newArr[i].signOrg == tarArray[n].signOrg){
                        newArr[i].children.push(tarArray[n])
                    }
                }
            }
            return newArr
        },
        deRepeat: function(arr){
            let newArr = []
            let obj = {};
            arr = arr.reduce((item, next) => {
            if (!obj[next.signOrg]) {
                item.push(next);
                obj[next.signOrg] = true;
            }
            return item;
            }, []);
            return arr
        },
        getData(){
            if (this.QueryTimePoint === "left") {
                // this.startTime =''
                this.endTime = this.formatDate(new Date()) + ":59"
            } else{
                // this.startTime = ''
                this.endTime = this.formatDate(this.formInline_temp.time) + ":59"
            }
            if(this.QueryStaff === "left"){
                this.formInline_temp.signUser = ""
            }
            let that = this
            getSignLastPoint({
                signOrgIds: this.formInline_temp.orgIds || this.$store.state.userinfo.organizationIds,
                queryType:1,
                pageIndex: this.formInline_temp.currentPageIndex -1,
                pageSize: this.formInline_temp.currentPageSize,
                startTime:this.startTime,
                endTime: this.endTime,
                signUser: this.formInline_temp.signUser,
                type: this.formInline_temp.type
            }).then((type) => {
                this.viewStaffDistributionData = type.data
                that.$nextTick(() => {
                    that.initMap(type.data)
                })  
            })
        },
        formatDate(date) { 
            var date = new Date(date)
            var year = date.getFullYear(); 
            var month = date.getMonth() + 1; 
            var day = date.getDate(); 
            var hour = date.getHours(); 
            var minute = date.getMinutes(); 
            return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+ " " +this.formatTen(hour)+ ":" +this.formatTen(minute)
        },
        formatTen(num) { 
            return num > 9 ? (num + "") : ("0" + num); 
        },
        addMarker(viewStaffDistributionData){
            let point = new Array();//定义数组标注经纬信息
				let marker = new Array();//定义数组点对象信息
				for(let i = 0; i < viewStaffDistributionData.length; i++){//遍历
					let infoA = viewStaffDistributionData[i].longitude;
					let infoB = viewStaffDistributionData[i].latitude;
					let everywill_track = new BMap.Point(infoA,infoB);
                    
					//创建单位标注
					let myIcon = new BMap.Icon('resource/rdspFile_1552981560146.png', new BMap.Size(0, 0), // 视窗大小
					{
						// anchor: new BMap.Size(35,155),
						//imageSize: new BMap.Size(26, 32), // 引用图片实际大小
		　　　　　　　　　imageOffset:new BMap.Size(0,0)  // 图片相对视窗的偏移
					});
                    let dutyMarker = new BMap.Marker(everywill_track,{icon:myIcon});  // 创建单位标注*/
                    map.addOverlay(dutyMarker);  
                    let start_signInDate = ""
                    let strart_markerLabelScoreList = ""
                    let signIn_signOut_height = 30
                    signIn_signOut_height = signIn_signOut_height + viewStaffDistributionData[i].children.length*16
                    // 单位气泡上多人名称
                    for(let j=0;j<viewStaffDistributionData[i].children.length;j++){
                        // 起始 签到签退时间
                        start_signInDate = viewStaffDistributionData[i].children[j].signUserName
                        strart_markerLabelScoreList+=`<p style='color: rgba(0, 0, 0, 0.8);font-weight: normal;font-size: 14px;'>`+ (start_signInDate) +`</p>`
                    }
					let markerLabelScore = new BMap.Label(`<div class='viewStaffDistribution_baiduMark-dutys'><div class='viewStaffDistribution_baiduMark-duty'><div>` + strart_markerLabelScoreList + `</div></div></div>`,{
						offset:new BMap.Size(-30, -signIn_signOut_height),
						position:everywill_track,
                    }); 
                    
					markerLabelScore.setStyle({
						width: 'auto',
						height:'45px',
						color: '#fff',
						fontSize: '16px',
						backgroundColor: 'none',
						border: 'none',
						borderRadius:"4px",
						textAlign: "left",
						padding: "0px",
					});
                    markerLabelScore.setZIndex(10000);
					map.addOverlay(markerLabelScore);
				}
        }
    }
}
</script>
<style scoped  lang="scss">
.viewStaffDistribution{
    padding-bottom: 20px;
    .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
    }
    .btn_cliss {
        display: flex;
        justify-content: flex-end;
    }
}
.myMapClass{
    height: 700px;
    width: 100%;
}
.viewStaffDistribution>div{
    height: 700px;
    width: 100%;
}
.no_allmap {
    height: 700px;
    width: 100%;
    background-color: #efefef;
    color:#000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
</style>
<style>
.viewStaffDistribution_baiduMark-duty{
    color:#000;
    font-size: 15px;
    font-weight: bold;
}
.viewStaffDistribution_baiduMark-dutys{
	opacity: 0.8;
	padding: 0px 0px 0px 0px;
    display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	background-color: #47CFAD;
	border-radius: 4px;
	padding: 4px 10px 4px 10px;
	font-weight: normal;
    position: relative;
}
.viewStaffDistribution_baiduMark-dutys:after{
	content: '';
	width: 0;
	height: 0;
	border: 10px solid;
	position: absolute;
	/* left: 14.5px; */
	bottom: 0;
	border-color:  #47CFAD transparent transparent;
    transform: translateY(20px) translateX(0px);
}
</style>